<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>详情页面</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="font/iconfont.css" />
        <link rel="stylesheet" href="css/css.css" />
        <link rel="stylesheet" href="css/layer.css" />

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/layer.js"></script>
        <script src="js/Public.js"></script>

    </head>

    <body>

        <header class="mainbav-bg">
            <div class="container">
                <div class="mainbav-title">
                    <div class="logo-title">
                        <a href="index.html">
                            <img src="images/logo.png" />
                            <div class="logo-title">
                                <h1>前端网</h1>
                                <p>为懒人提供无限可能</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mainbav-box">
                <div class="container">
                    <div class="mainbav">
                        <ul>
                            <li><a href="index.html">首页</a></li> 
                            <li><a href="WEB.html">前端</a></li>
                            <li><a href="Backstage.html">后台</a></li> 
                            <li><a href="Database.html">数据库</a></li> 
                            <li><a href="UI.html">UI</a></li>
                            <li><a href="Download.html">资源下载</a></li> 
                        </ul>
                    </div>
                    <div class="shortcut_nav" id="menu_nav">
                        <ul>
                            <li>
                                <div class="shortcut_items search">
                                    <span class="icon-sousuo"></span>
                                    <input class="nav_search" type="search" value="" placeholder="输入关键字搜索">
                                </div>
                            </li>
                            <li>
                                <a href="login.html">登录</a>
                            </li>
                            <li>
                                <a href="signup.html">注册</a>
                            </li>
                            <li>
                                <a href="ucenter.html" class="username">小甘</a>
                                <div class="m-tip" style="display: none;">
                                    <i></i>
                                    <div class="m-tip-list">
                                        <a href="#">积分</a>
                                        <a href="#">充值</a>
                                        <a href="#">上传</a>
                                        <a href="#">退出</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

        <div class="container sidebar-top">
            <div class="sidebar-left" id="sidebar">
                <div class="widget-wrap">
                    <h1>分类</h1>
                    <div class="widget">
                        <ul>
                            <li>
                                <a href="#">前端</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">后台</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">数据库</a>
                                <span class="category-list-count">5</span>
                            </li>
                            <li>
                                <a href="#">UI</a>
                                <span class="category-list-count">12</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="widget-wrap">
                    <h1>最新文章</h1>
                    <div class="widget">
                        <ul>
                            <li>
                                <a href="#">前端</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">后台</a>
                                <span class="category-list-count">40</span>
                            </li>
                            <li>
                                <a href="#">数据库</a>
                                <span class="category-list-count">5</span>
                            </li>
                            <li>
                                <a href="#">UI</a>
                                <span class="category-list-count">12</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="sidebar-right">
                <h1>Web开发</h1>
                <div class="article-single">
                    <h5>【原创】从达标到卓越 —— API 设计之道</h5>
                    <p><span>作者: 法海</span><span>发表于: <a>2017-02-16</a></span></p>
                    <div class="article-entry">
                        <p><img src="images/zk1.jpg" /></p>
                        <p>新技术层出不穷，长江后浪推前浪，而浪潮褪去后能留下来的，是一些经典的设计思想。</p>
                        <p>在前端界，以前有远近闻名的 jQuery，近来有声名鹊起的 Vue.js。这两者叫好又叫座的原因固然有很多，但是其中有一个共同特质不可忽视，那便是它们的 <strong>API 设计</strong> 非常优雅。</p>
                        <p>因此这次我想来谈个大课题 —— API 设计之道。</p>
                        <hr>
                        <h2>讨论内容的定义域</h2>
                        <p>本文并不是《jQuery API 赏析》，当我们谈论 API 的设计时，不只局限于讨论「某个框架应该如何设计暴露出来的方法」。作为程序世界分治复杂逻辑的基本协作手段，广义的 API 设计涉及到我们日常开发中的方方面面。</p>
                        <p>最常见的 API 暴露途径是函数声明（Function Signiture），以及属性字段（Attributes）；而当我们涉及到前后端 IO 时，则需要关注通信接口的数据结构（JSON Schema）；如果还有异步的通信，那么事件（Events）或消息（Message）如何设计也是个问题；甚至，依赖一个包（Package）的时候，包名本身就是接口，你是否也曾碰到过一个奇葩的包名而吐槽半天？</p>
                        <p>总之，「API 设计」不只关乎到框架或库的设计者，它和每个开发者息息相关。</p>
                        <h3>正确拼写</h3>
                        <p>正确地拼写一个单词是底线，这一点无需赘述。然而 API 中的各种错别字现象仍屡见不鲜，即使是在我们阿里这样的大公司内。</p>
                        <p>曾经有某个 JSON 接口（mtop）返回这样一组店铺数据，以在前端模板中渲染：</p>
                        <pre><span class="pl-k">import</span> {<span class="pl-smi">createElement</span>, <span class="pl-smi">Component</span>, <span class="pl-smi">render</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>rax<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Text</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>rax-text<span class="pl-pds">'</span></span>;

<span class="pl-k">class</span> <span class="pl-en">Hello</span> <span class="pl-k">extends</span> <span class="pl-e">Component</span> {
  <span class="pl-en">render</span>() {
    <span class="pl-k">return</span> <span class="pl-k">&lt;</span><span class="pl-c1">Text</span> style<span class="pl-k">=</span>{<span class="pl-smi">styles</span>.<span class="pl-c1">title</span>}<span class="pl-k">&gt;</span>Hello {<span class="pl-c1">this</span>.<span class="pl-smi">props</span>.<span class="pl-c1">name</span>}<span class="pl-k">&lt;</span><span class="pl-k">/</span><span class="pl-c1">Text</span><span class="pl-k">&gt;</span>;
  }
}

<span class="pl-k">const</span> <span class="pl-c1">styles</span> <span class="pl-k">=</span> {
  title<span class="pl-k">:</span> {
    color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#ff4400<span class="pl-pds">'</span></span>,
    fontSize<span class="pl-k">:</span> <span class="pl-c1">48</span>,
    fontWeight<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bold<span class="pl-pds">'</span></span>,
  }
};

<span class="pl-en">render</span>(<span class="pl-k">&lt;</span>Hello name<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>world<span class="pl-pds">"</span></span> <span class="pl-k">/</span><span class="pl-k">&gt;</span>);</pre>
                        <p>乍一看平淡无奇，结果我调试了小半天都没能渲染出店铺的「店铺等级标识图片」，即 <code>shopLevelImg</code> 字段。问题到底出在了哪里？</p>
                        <p>眼细的朋友可能已经发现，接口给的字段名是 <code>shopLeveImg</code>，少了一个 <code>l</code>，而在其后字母 <code>I</code> 的光辉照耀下，肉眼很难分辨出这个细节问题。</p>
                        <p>拼错单词的问题真的是太普遍了，再比如：</p>
                        <p>注意到，这些拼写错误经常出现在 <strong>字符串</strong> 的场景中。不同于变量名，IDE 无法检查字符串中的单词是否科学、是否和一些变量名一致，因此，我们在对待一些需要公开出去的 API 时，需要尤其注意这方面的问题；另一方面，更认真地注意 IDE 的 typo 提示（单词拼写错误提示），也会对我们产生很大帮助。</p>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer-bg">
            <div class="container">
                <div class="copyright">
                    <p>Copyright © 2017 Taobao FED. All rights reserved.</p>
                    <a href="">版权声明</a>
                </div>
            </div>
        </footer>

        <script src="js/portamento.js"></script>
        <script>
            $('#sidebar').portamento({ disableWorkaround: true });
        </script>

    </body>

</html>